<template>
  <view class="user-vip-page">
    <view class="list">
      <view class="item" v-for="item in list" :key="item.id">
        <view class="r">充值</view>
        <view class="num">
          <view class="left">
            <view class="amount">充值: {{item.amount * 1}}</view>
            <!--<view>送积分: {{item.score * 1}}</view>-->
          </view>
          <view class="right">
            <view class="text">赠送:</view>
            <view class="m">￥{{item.balance * 1}}</view>
          </view>
        </view>
        <view class="total">
          <view class="text">总计得到:</view>
          <view class="x">余额￥{{item.amount * 1 + item.balance * 1 }} + 积分{{item.score * 1}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import base64 from '../../util/base64'
import LastModel from '../../api/last'
const lastModel = new LastModel()

export default {
  components: {
  },
  computed: {

  },
  watch: {

  },
  data() {
    return {
      list: []
    }
  },
  methods: {
    fetch() {
      lastModel.refill().then(response => {
        let { data } = response
        data = base64.parse(data)
        this.list = data.list
      })
    }
  },
  onLoad(options) {

  },
  onShow() {
    this.fetch()
  },
  onPageScroll(e) {
  },
  onPullDownRefresh() {
  },
  onHide() {
  }
}
</script>

<style lang="scss" scoped>
.user-vip-page {
  background: #f3f5f7;
  padding: 20rpx 0;
  .list {
    display: grid;
    padding: 0 20rpx;
    //grid-template-columns: 1fr 1fr;
    grid-template-columns: 1fr;
    gap: 20rpx;
    .item {
      background: #fde2c6;
      box-sizing: border-box;
      padding: 20rpx;
      border-radius: 20rpx;
      display: flex;
      flex-direction: column;
      position: relative;
      .r {
        position: absolute;
        background: #c9823f;
        top: 0;
        left: 0;
        border-top-left-radius: 20rpx;
        border-bottom-right-radius: 20rpx;
        padding: 5rpx 20rpx;
        font-size: 24rpx;
        color: white;
      }
      .total {
        .text {
          font-size: 24rpx;
          font-weight: 700;
          color: #6e451c;
        }
        .x {
          font-size: 24rpx;
          color: $main_color;
          font-weight: 700;
        }
      }
      .num {
        display: flex;
        justify-content: space-between;
        .left {
          flex: 1;
          .amount {
            font-size: 28rpx;
            font-weight: 700;
            color: #6e451c;
            padding-top: 50rpx;
          }
        }
        .right {
          background: #c9823f;
          width: 120rpx;
          height: 120rpx;
          border-radius: 10rpx;
          padding: 10rpx;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          .text {
            font-size: 24rpx;
            color: white;
          }
          .m {
            color: white;
            font-weight: 700;
            font-size: 30rpx;
          }
        }
      }
    }
  }
}
</style>
